<template>
<div :class="$style.container" class="user">
  <group :gutter="0">
    <div :class="$style.username" v-if="wxName === 'name'">
      <x-input placeholder="修改昵称" v-model="username"/>
      <p>以英文字母或汉字开头，限4-16个字符，一个汉字为2个字符</p>
    </div>
    <div :class="$style.pwd" v-if="wxName === 'pwd'">
      <x-input placeholder="请输入当前密码" v-model="pwd" type="password"/>
      <x-input placeholder="请输入新密码（密码长度在8-32个字符之间）" v-model="repeatPwd" type="password"/>
      <x-input placeholder="请输入确认新密码" v-model="newPwd" type="password"/>
    </div>
    <div :class="$style.avatar" v-if="wxName === 'avatar'">
      <avator @uploadSuccess="uploadvatarSuccess"/>
    </div>
    <div :class="$style.gender" v-if="wxName === 'gender'">
      <popup-picker title="选择性别" :data="genders"  v-model="gender" show-name @on-change="change"></popup-picker>
    </div>
    <div :class="$style.btn">
      <x-button type="primary" :text="text" @click.native="updateUser"></x-button>
    </div>
  </group>
  <div>
     <loading :show="showLoading" text="加载中..."></loading>
     <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>

<script>
import Avator from './components/avatar'
import { Group, Cell, XInput, PopupPicker, XButton, Loading, Alert } from 'vux'
import http from '../../APIService/http'
import { signPwd } from '../../utils/config'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      wxName: '',
      username: '',
      pwd: '',
      repeatPwd: '',
      newPwd: '',
      genders: [[{name: '男', value: 0}, {name: '女', value: 1}]],
      gender: []
    }
  },
  mounted () {
    this.username = this.$store.getters.user.name
    this.gender[0] = this.$store.getters.user.gender
    this.wxName = this.$route.query.name
  },
  computed: {
    text () {
      if (this.wxName === 'name') {
        return '修改'
      } if (this.wxName === 'pwd') {
        return '修改'
      } if (this.wxName === 'avatar') {
        return '修改'
      } if (this.wxName === 'gender') {
        return '修改'
      }
    }
  },
  components: {
    Group,
    Cell,
    XInput,
    PopupPicker,
    XButton,
    Loading,
    Alert,
    Avator
  },
  methods: {
    change (val) {
      this.gender[0] = +val[0]
    },
    // 更新用户信息
    async updateUser () {
      try {
        if (this.wxName === 'name') {
          if (!this.username) {
            this.tip = '昵称不能为空'
            this.showAlert = true
            return false
          }
        } else if (this.wxName === 'pwd') {
          if (!this.pwd || (this.pwd !== this.repeatPwd)) {
            this.tip = '密码不一样'
            this.showAlert = true
            return false
          } else if (!this.newPwd) {
            this.tip = '新密码不能为空'
            this.showAlert = true
            return false
          }
        } else if (this.wxName === 'avatar') {
          if (!this.avatar) {
            this.tip = '头像不能为空'
            this.showAlert = true
            return false
          }
        } else if (this.wxName === 'gender') {

        }

        this.showLoading = true
        let params = {
          name: this.username,
          gender: this.gender[0],
          password: this.newPwd ? signPwd(this.newPwd) : '',
          avatar: this.avatar
        }
        let res = await http.post(`/users/updateUser`, params)
        this.showLoading = false
        if (res.code === 0) {
          let user = this.$store.state.user.user
          if (this.username) {
            user.name = this.username
          }
          user.gender = this.gender[0]
          if (this.avatar) {
            user.avatar = this.avatar
          }
          this.$store.commit('SET_USER', user)
          this.$router.push({
            path: '/user'
          })
        }
      } catch (err) {
        this.showLoading = false
        console.leog('update user fail:', err)
      }
    },
    uploadvatarSuccess (id) {
      this.avatar = id
    }
  }
}
</script>

<style lang='less' module>
.container {
  min-height: 100vh;
  input::-webkit-input-placeholder {
    padding-left:20px;
    /* placeholder颜色  */
    color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 13px;
    vertical-align: top;
  }
  .username {
    p {
      &:before {
        margin-bottom:10px;
        display: block;
        content: '';
        overflow: hidden;
        width: 100%;
        height:1px;
        background: #999;
        transform: scaleY(50%);
        -webkit-transform: scaleY(50%);
      }
      padding: 0px 10px;
      box-sizing: border-box;
      font-size:14px;
      color:#333;
      line-height:16px;
    }
  }
  .btn {
    position: fixed;
    bottom:300px;
    left:0;
    right:0;
    padding: 0px 30px;
    button {
      background: #e36049;
    }
  }
}

</style>
<style scoped>
  .user >>> .weui-cells:after {
    height:0px;
    border-bottom:none;
  }
</style>
<style>
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: #fff!important;
  background-color: #e36049!important;
}
</style>